<template>
  <h1>当前时间：{{ current }}</h1>
</template>

<script>
export default {
  data() {
    return {
      current: this.getCurrent(),
      timer: null, // timer 要放在data里面，保证组件复用
    };
  },
  methods: {
    getCurrent() {
      return new Date().toLocaleTimeString();
    },
  },
  created() {
    console.log("created");
    this.timer = setInterval(() => { // 不清理该计时器会导致函数反复执行，虽然组件已经销毁
      console.log("更新了时间");
      this.current = this.getCurrent();
    }, 1000);
  },
  destroyed() { // 组件销毁时清除定时器，也可以在beforeDestroy钩子中清除定时器
    clearInterval(this.timer);
  },
};
</script>

<style></style>
